<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>设置</title>

  <link rel="stylesheet" href="index.css" />
</head>

<body>
  <div id="app">
    <div class="wrap">
      <div class="menu">
        <div class="menu-title">通用</div>
        <div class="menu-main">
            <!--   ns配置         -->
            <div class="menu-item">
                <div class="item-title">
                    Ns地址配置
                    <span>输入Nightscout地址和密钥</span>
                </div>
                <div class="item-content">
                    <input v-model="nsAddr" class="ns-addr-input" placeholder="Nightscout地址"  type="text">
                    <input v-model="nsSecret" class="ns-secert-input" placeholder="密钥"  type="text">
                </div>
            </div>
            <div class="menu-item">
                <div class="item-title">
                    Ns目标配置
                    <span>请输入目标值，如超过则进行为红色，单位为mmol/L</span>
                </div>
                <div class="item-content">
                    <input v-model="nsLow" class="ns-range-input" placeholder="目标最低值"  type="text">
                    <input v-model="nsHigh" class="ns-range-input" placeholder="目标最高值"  type="text">
                </div>
            </div>

            <div class="menu-item">
                <div class="item-title">
                    是否开机自启动
                </div>
                <div class="item-content">
                    <!--        switch            -->
                    <div>
                        <!-- 开关按钮 -->
                        <p class="btn-on" :style="buttonStyles" @click="toggle">
                            <!-- 圆点 -->
                            <span class="btn-on-circle" :style="circleStyles"></span>
                            <!-- 文字 -->
                            <span class="btn-on-text" :style="textStyles">{{ statusText }}</span>
                        </p>
                    </div>
                </div>
            </div>

          <div class="menu-item">
            <div class="item-title">
              悬浮球透明度
              <span>(输入0到1之间的数)</span>
            </div>
            <div class="item-content">
              <input @change="checkOpacity" v-model="opacity" class="opacity-input" maxlength="5" type="text">
            </div>
          </div>

        <div class="menu-item">
            <div class="item-title">
                最近拉取NS数据时间
                <span>{{lastUpdateTime}}</span>
            </div>
        </div>

        <div class="menu-item menu-item-desc">
            <div class="item-desc">
                <a href="#" @click="openLink('https://support.qq.com/product/714046')">建议优化</a>
                <a href="#" @click="openLink('https://support.qq.com/product/714046/faqs-more')" >配置说明</a>
            </div>
        </div>
<!--          <div class="menu-item">-->
<!--            <div class="item-title">-->
<!--              主题色-->
<!--              <span>(主色与副色)</span>-->
<!--            </div>-->
<!--            <div class="item-content">-->
<!--              <div class="color-input">-->
<!--                <div class="color-warp">-->
<!--                  <input @change="checkColor(0)" v-model="mainColor" placeholder="主色" maxlength="7" type="text">-->
<!--                </div>-->
<!--                <div :style="{'background-color': mainColor}" class="color-preview"></div>-->
<!--              </div>-->
<!--              <div class="color-input">-->
<!--                <div class="color-warp">-->
<!--                  <input @change="checkColor(1)" v-model="subColor" placeholder="副色" maxlength="7" type="text">-->
<!--                </div>-->
<!--                <div :style="{'background-color': subColor}" class="color-preview"></div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->

        </div>
      </div>
    </div>
    <div class="btn-box">
      <div @click="storeConfig(0)" class="store-btn">保存</div>
      <div @click="storeConfig(1)" class="store-btn">恢复默认</div>
    </div>
  </div>

</body>
<script src="./index.js"></script>
</html>
